<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>string6测试</title>
  <script src="./string6.js"></script>
</head>
<body >
  <div id="htmlContent" ></div>
  <textarea id="scriptContent"></textarea>
  <script type="text/javascript">
    function string6Text(){

      //准备一份数据，整个模板都是用这份数据来驱动的
      let data = [
        {
          id: 1,
          name: "张向明",
          sex: 1
        },
        {
          id: 2,
          name: "蒋海艳",
          sex: 0
        }
      ];

      //起笔一个string6模板，后面一大段都是这个模板的内容
      let html = string6` 
    <style>
      html,body{
        width: 100%;
        height: 100%;
        margin: 0px;
        padding:0px;
      }
      body{
        display:flex;
        align-items: stretch;
      }
      #htmlContent{
        width: 50%;
      }
      #scriptContent{
        width: 50%;
        background-color:#000;
        color:#fff;
      }
    </style>  

    <!-- 中规中矩 -->
    <ul>
    ${
      (echo) => {
        for (let item of data) {
          echo`
      <li id="${item.id}">${item.name}</li>`
        }
      }
    }
    </ul>

    <!-- 
      如果你不喜欢箭头函数和echo,
      可以用匿名的非箭头函数,函数中的this也是一个回写标签,和echo是同样的作用。
    -->
    <ul>
    ${
      function() {
        for (let item of data) {
          this`
      <li id="${item.id}">${item.name}</li>`
        }
      }
    }
    </ul>

    <!-- 
      高阶脚本中尽量减少大括号,下面的例子中for代码块只有一个语句,因此可以省略大括号。
      这在普通js代码中不是很好的风格,但在string6中大力提倡。
    -->
    <ul>
    ${
      echo => {
      for (let item of data)
        echo`
      <li id="${item.id}">${item.name}</li>`
      }
    }
    </ul>

    <!-- 高阶脚本中尽量用无污染的map来替代循环 -->
    <ul>
    ${
      echo => 
        data.map(item =>echo`
      <li id="${item.id}">${item.name}</li>`)
    }
    </ul>

    <!-- 
      箭头函数是用来解决较复杂问题的,
      如果问题比较简单则直接用字符串,注意下面这个例子的join函数是神来之笔。
    -->
    <ul>
    ${
      data.map(item =>`
      <li id="${item.id}">${item.name}</li>`).join("")
    }
    </ul>

    <!--
      echo本质上是一个函数,某些场景中用括号来调用更简单粗暴
    -->
    <ul>
      ${
        echo=>{
          for(let item of data){
            echo(`
      <li>${item.name}</li>`);
          }
        }
      }
    </ul>

    <!-- 以下演示的是if-hook -->
    <ul>
    ${
    echo =>
      data.map(item =>
        echo`
      <li id="${item.id}">
        ${[/if-hook/, item.sex, { 0: "女", 1: "男" }]}
      </li>
      `)
    }
    </ul>

    <!-- 以下演示brackets-hook -->
    <pre>
      let json = [
      ${
        (echo)=>{
          for(let i=0;i<data.length;i++){
            let item = data[i]
            echo`
        <brackets-hook>
          id:${item.id},
          name:"${item.name}",
          sex:${item.sex}
        </brackets-hook>`
            if(i<data.length-1) echo`,`
          }
        }
      }
      ];
    </pre>

    <!-- 生成sql的示例 -->
    <pre>
      ${
        echo=>{
          for(let item of data)
            echo
            `
      INSERT INTO users (id,name,sex) VALUES (${item.id},'${item.name}',${item.sex});`
        }
      }
    </pre>
      `;
      return html;
    }
    let html = string6Text();
    console.log(html);
    document.querySelector("#htmlContent").innerHTML=html;
    document.querySelector("#scriptContent").innerHTML=html;
  </script>
</body>
</html>